import { DownOutlined, UpOutlined } from '@ant-design/icons';
import React, { useState } from 'react';

interface TableComponentProps {
  children?: React.ReactNode;
  title: string;
  style?: React.CSSProperties
}

const SearchFormContent: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
    return (
        <div 
            style={{ 
                width: '100%', 
                height: '100%',
                padding: '24px 20px 4px 20px', 
                backgroundColor: '#ffffffff' 
            }}
        >
        { children }
        </div>
    );
};

const SearchForm: React.FC<TableComponentProps> = ({ children, title, style }) => {
    const [collapsed, setCollapsed] = useState(true);
    return (
        <div style={style}>
            {/* #0958d9 */}
            <div 
                style={{ 
                    width: '100%', 
                    height: '54px', 
                    backgroundColor: '#ffffffff', 
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    padding: '0 0 0 20px',
                    borderBottom: '1px solid #e1e1e1',
                }}
            >
                <div style={{ display: 'flex' }}>
                    <span style={{ fontWeight: '800', color: '#0958d9', marginRight: '6px' }}>|</span>
                    <div style={{ padding: '2px', color: '#0958d9' }}>{ title }</div>
                </div>
                <div 
                    style={{ 
                        display: 'flex' 
                    }}
                    onMouseEnter={(e) => {
                        e.currentTarget.style.color = '#1890ff';
                        e.currentTarget.style.cursor = 'pointer';
                    }}
                    onMouseLeave={(e) => {
                        e.currentTarget.style.color = '#000000';
                        e.currentTarget.style.cursor = 'default';
                    }}
                    onClick={() => setCollapsed(!collapsed)}
                >
                    { 
                        collapsed 
                        ? 
                        <div style={{ padding: '2px', marginRight: '4px' }}>收起</div> 
                        : 
                        <div style={{ padding: '2px', marginRight: '4px' }}>展开</div> 
                    }
                    { 
                        collapsed 
                        ? 
                        <UpOutlined style={{ fontSize: '12px', marginRight: '20px' }}/> 
                        : 
                        <DownOutlined style={{ fontSize: '12px', marginRight: '20px' }}/> 
                    }
                </div>
            </div>
            { collapsed ? <SearchFormContent>{ children }</SearchFormContent> : null }
        </div>
    );
};

export default SearchForm;